<%@page import="nl.hva.web.mvcwebapp.models.CourseUser"%>
<%@page import="nl.hva.web.mvcwebapp.doa.CourseDAO"%>
<%@page import="java.util.List"%>
<%@page import="nl.hva.web.mvcwebapp.controllers.UserController"%>
<%@include file="/WEB-INF/templates/configuration.jsp" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="windows-1252"%>
<!--  **************** Multi Language ******************** -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<% 
session = request.getSession(true);
String lang = (String) session.getAttribute("lang");
if(lang==null){
    //default language if language not set.
    lang = "en";
}
%>
<fmt:setLocale value="<%=lang%>" />
<fmt:setBundle basename="<%=lang%>" />
<!--  **************** Multi Language END ******************** -->

<!DOCTYPE html>
<%
    HttpSession session_user = request.getSession(true);
    String firstname = (String) session_user.getAttribute("user_firstname");
    String user_username = (String) session_user.getAttribute("user_username");
    int user_id = 0;
    int user_type = 0;
    if (firstname != null) {
        user_id = Integer.valueOf("" + session_user.getAttribute("user_id"));
        user_type = Integer.valueOf("" + session_user.getAttribute("user_type"));
    }
    String headteacher = (String) request.getAttribute("Headteacher");
%>
<script>
    $(document).ready(function(){
        var show=0;
        $(".chapterbutton").click(function(){
            if(show == 0){
                $(".chapters").hide();
                show=1;
            }else{
                $(".chapters").show();
                show=0;
            }
            return false;
        });
    });            
</script>
<h1 class="course-header left" style=""><fmt:message key="Course-course"/> ${course.coursetitle}</h1>
<%if (user_type == 2) {
        if (user_username.equals(headteacher)) {
%>
<a class="left icon edit" title="edit" href="edit?id=${course.courseid}" class="edit">edit</a>
<%}
    }%>
<%if (user_type == 3) {%>
<a class="left icon edit" title="edit" href="edit?id=${course.courseid}" class="edit">edit</a>
<%}%>
<br class="clearfix"/>
<hr />
<div class="wrapper-course">
    <div class="left">
        <img class="course-picture" src="${course.coursepicture}"></img>
    </div>
    <div class="left course-description" style="">
        <h2><b>Teacher: ${Headteacher}</b></h2>
        <p>${course.coursedescription}</p>
    </div>
</div>
<c:choose>
    <c:when test="${enrolled}">

    </c:when>
    <c:otherwise>
        <%if (firstname != null) {
        %>
        <div> 
            <a class="button" href="${url}course/enroll?courseid=${course.courseid}">Enroll for this course.</a>
        </div>
        <%            }%>

    </c:otherwise>
</c:choose>

<c:choose>
    <c:when test="${enrolled}">

        <br class="clearfix">
<!--        <div class="course-progress">
            <h3>Course Progress</h3>
            <div class="progress-bar">
                <div class="progress-bar-status center" style="color: white; width:${progress*2-10}px">${progress}%</div>
            </div>

            <hr />
        </div>-->
        <div class="navigation-course">
            <div class="left" style="margin-right: 85px">
                <a href="#"><img class="chapterbutton" width="100px" height="100px" src="${imgurl}book-icon-course.png"></img></a>
                <p><fmt:message key="Course-chapters"/></p>
            </div>
<!--            <div class="left" style="margin-right:85px">
                <a href="${url}course/chapters?courseid=${course.courseid}"><img width="100px" height="100px" src="${imgurl}grade-icon-course.png"></img></a>
                <p>Grades</p>
            </div>-->
            <div class="left" >
                <a href="${url}forum/topic_view?courseid=${course.courseid}"><img width="100px" height="100px" src="${imgurl}forum-icon.png"></img></a>
                <p><fmt:message key="Course-forum"/></p>
            </div>
            <br class="clearfix">
        </div>
        <hr />

        <div class="chapters">
            <h2 class="left"><fmt:message key="Course-chapters"/></h2><br/>
            <%if (user_type == 2) {
                    if (user_username.equals(headteacher)) {
            %>
            <a class="left icon edit" title="edit" href="${url}course/chapters?courseid=${course.courseid}" class="edit">edit</a>
            <%}
                }%>
            <%if (user_type == 3) {%>
            <a class="left icon edit" title="edit" href="${url}course/chapters?courseid=${course.courseid}" class="edit">edit</a>
            <%}%>

            <table class="zebra">
                <thead>
                <th style="width:25px;"></th>
                <th style="width:150px;"><strong>Title</strong></th>
                <th style="width:200px;"><strong>Description</strong></th>
                <th style="width:20px;"></th>
                </thead>
                <tbody>
                    <c:forEach var="tempChapter" items="${chapters}">
                        <tr>
                            <td class="completed"></td>
                            <td><a href="${url}chapter/view?chapterid=${tempChapter.chapterid}">${tempChapter.chapterName}</a></td>
                            <td>${tempChapter.chapterdescription}</td>
                            <td><a class="icon view" title="view" href="${url}chapter/view?chapterid=${tempChapter.chapterid}">view</a></td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
            <div>
                <p>
                    <a class="button" href="${url}course/livestream"><fmt:message key="Course-livestream"/></a>
                </p> 
            <br class="clearfix">
        </div>
        <hr />
            <div>
                <h3 class="left"><fmt:message key="Course-users-course"/>:</h3><br/>
                <c:choose>                
                    <c:when test="${amountusers != 0}">
                        <!-- Wanneer er gebruikers opgeslagen zijn, worden ze hier getoond -->
                        <table class="zebra">
                            <thead>
                                <tr>
                                    <th style="width:25%;"> 
                                        <strong><fmt:message key="fname"/></strong>
                                    </th>
                                    <th style="width:50%;">
                                        <strong><fmt:message key="lname"/></strong>
                                    </th>
                                    <%if (user_type == 2 || user_type == 3) {
                                    %>
                                    <th style="width:15%;">
                                        <strong><fmt:message key="controls"/></strong>
                                    </th>
                                    <%                        }%>
                                </tr>
                            </thead>
                            <c:forEach var="tempUser" items="${users}">
                                <!-- Per gebruiker wordt nu een rij aangemaakt met daarin zijn gegevens -->
                                <tr>
                                    <td>
                                        <a href="${url}user/user_profile?id=${tempUser.pk.user.userId}">${tempUser.pk.user.userFirstName}</a>
                                    </td>
                                    <td>
                                        <a href="${url}user/user_profile?id=${tempUser.pk.user.userId}">${tempUser.pk.user.userLastName}</a>
                                    </td>
                                    <%if (user_type == 3) {
                                    %>
                                    <td>
                                        <a class="icon view" href="${url}user/user_profile?id=${tempUser.pk.user.userId}">view</a>
                                        <a class="icon edit" href="${url}user/edit?id=${tempUser.pk.user.userId}">edit</a>
                                        <a class="icon delete" href="javascript:if(confirm('Weet u zeker dat u deze user wil verwijderen?'))
                                           window.location='${url}user/delete?courseid=${tempUser.pk.user.userId}';">delete</a>
                                    </td>
                                    <%                       }%>
                                </tr>
                            </c:forEach>
                        </table>
                    </c:when>
                    <c:otherwise>
                        <!-- Als er geen gebruikers zijn, wordt deze melding getoond -->
                        There are no users found.
                    </c:otherwise>
                </c:choose>
            </div>
            <!--<form id="cursusGebruiker" action="enroll" method="post">
                <p>  
            <% if (user_type == 0) {%>
        <td><label for="toEnroll">You need to log in to enroll for a course!</label></td>
            <%}%>
            <% if (user_type == 1) {%>
            <a class="button" href="${url}course/livestream?courseid=${course.courseid}">Enroll for this course!</a>
            <%}%>
            </p>
        </form>-->
            <br class="clearfix"/>
        </div>

    </c:when>
</c:choose>
